<!-- 国家地区增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    :title="`${type === UPDATE_DRAWER_TYPE.CREATE ? '新增' : '编辑'}${title}`"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="hjd-drawer__content">
      <el-form ref="dataForm" :model="form" label-width="100px" style=" margin-left:20px;margin-right:20px;">
        <el-form-item v-for="item in formItem" :key="item.prop" :label="item.label">
          <el-input v-if="item.type === undefined || item.type === FORM_ITEM_TYPE.INPUT" v-model="form[item.prop]" />
          <el-switch v-else-if="item.type === FORM_ITEM_TYPE.SWITCH" v-model="form[item.prop]" />
          <el-select v-else-if="item.type === FORM_ITEM_TYPE.SELECT" v-model="form[item.prop]">
            <el-option
              v-for="option in item.options"
              :key="option[item.optionValue]"
              :label="option[item.optionValue]"
              :value="option[item.optionLabel]"
            />
          </el-select>
        </el-form-item>

        <div class="hjd-drawer__footer">
          <el-button @click="showDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </div>

      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import _ from 'lodash'
import { FORM_ITEM_TYPE, UPDATE_DRAWER_TYPE } from '@/enums/table'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },

    type: {
      type: String,
      default: UPDATE_DRAWER_TYPE.CREATE
    },

    form: {
      required: true,
      type: Object
    },
    formItem: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      showDialog: this.visible,

      beforeData: {},

      formData: {},

      country: [],

      FORM_ITEM_TYPE,
      UPDATE_DRAWER_TYPE
    }
  },

  async created() {
    if (this.type === UPDATE_DRAWER_TYPE.EDIT) {
      this.formData = _.cloneDeep(this.form)
    }
  },

  methods: {
    submit() {
      console.log('submit')
    }
  }
}
</script>
